<template>
  <van-row>
    <van-col span="24">
      <!-- 分页查询商家信息 -->
      <!-- <van-pull-refresh v-model="refreshing" @refresh="onRefresh"> -->
        <van-list
            v-model:loading="loading"
            :finished="finished"
            finished-text="没有更多了"
            @load="getBusinessByPage"
          >
          <!-- 列表项 -->
          <van-row style="margin-top: 5px;" v-for="business in list" :key="business.businessId">
              <van-col :span="8" align="center" >
                  <img :src="business.businessImg" style="width: 60%;height: 60px;">
              </van-col>
              <van-col :span="16" align="left" >
                  <div style="font-size: 16px;">{{business.businessName}}</div>
                  <div style="font-size: 12px;">{{business.businessExplain}}</div>
                  <div style="font-size: 12px;">{{business.businessAddress}}</div>
              </van-col>
            </van-row>
          </van-list>
      <!-- </van-pull-refresh> -->
    </van-col>
  </van-row>
</template>

<script setup>
import { ref,getCurrentInstance, onMounted } from 'vue';
import { showNotify } from 'vant';

   const {proxy} = getCurrentInstance();

   //--------------------列表相关的变量和函数--------------------------

    const list = ref([]);
    const loading = ref(false);
    const finished = ref(false);

    //------------------------分页查询商家数据-------------------------------

    const query = ref({
      pageNow: 0,
      pageCount: 5,
      businessName: ''
    })

    const pb = ref({
      totalRows: 0,
      data: []
    })

    const getBusinessByPage = ()=>{

      //正在加载
      loading.value = true;

      query.value.pageNow += 1;


      setTimeout(() => {

        proxy.$axios({
          method: 'post',
          url: '/business/page',
          data: query.value
        }).then(res=>{

          //正在加载置为false
          loading.value = false;

          let resultBean = res.data;
          if(resultBean.code == 200){
            
            pb.value = resultBean.data;

            //将pageBean对象中的商家集合的内容循环填充到list集合中  list中会追加每一页的数据
            pb.value.data.forEach((business)=>{
              list.value.push(business);
            })

            //判断list中商家的数量和总记录数是否相同   相同说明查询完毕了
            if(list.value.length == pb.value.totalRows){
                finished.value = true;   //设置查询完毕  列表下方就会出现  没有更多了
            }
            
          }else{
            showNotify({ message: resultBean.msg });
          }
        }).catch(error=>{
          showNotify({ message: error.message });
        })

      }, 2000);


    }

    // onMounted(()=>{
    //   getBusinessByPage();
    // })

</script>

<style>
</style>
